<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./MVC.js"></script>

</head>

<body>
    <h1 id="result"></h1>
    <script>
        // 存储数据    M层
        MVC.addModule('data', {
            msg: 'hello iu'
        });

        // MVC.addModule('a.b.c', 123);

        // 视图        V层
        MVC.addView('data', function(M) {
            let dom = document.createElement('div');
            // console.log(M.get('data'));
            dom.innerHTML = M.get('data').msg;
            document.getElementById('result').appendChild(dom);
            return dom
        });

        // 交互
        MVC.addCtrl('data', function(M, V) {
            let dom = V.render('data');
            dom.onclick = function() {
                dom.style.color = 'red'
            }
        })
        MVC.install();
    </script>
</body>

</html>